import { produce } from "immer";
import { useReducer } from "react";
import "./App.css";

function App() {
    /* 
      useReducer
      1. 使用immer来简化写法
    */
    function reducer (state, action) {
        switch (action.type) {
            case 'add': 
                return produce(state, (draft) => {
                    // 这里不需要return
                    draft.a.c.e += action.num
                })
        }

        return state
    }
    const initializer = (param) => {
        return {
          a: {
            c: {
              e: 0,
              f: 0
            },
            d: 0
          },
          b: 0
        }
      }
    const [res, dispatch] = useReducer(reducer, null, initializer)
    return (
        <>
        <div className="card">
            <div onClick={() => dispatch({type: 'add', num: 2})}>加</div>
            <div>{JSON.stringify(res)}</div>
        </div>
        </>
    );
}

export default App;
